﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UcSensorManager.ascx.cs" Inherits="TheHeGeo.UserControl.UcSensorManager" %>
<%@ Register Assembly="DevExpress.Web.v14.2, Version=14.2.3.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web" TagPrefix="dx" %>


<style>
      #map_canvas {
        width: 850px;
        height: 800px;
      }
    </style>
    
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
   
    var map;
    var loadMap = false;
    /*function OnGridFocusedRowChanged() {
        grvData.GetRowValues(grvData.cpEditingRowIndex, 'Latitude;Longitude', OnGetRowValues);
    }

    function OnGetRowValues(values) {
        current_possition = values;
    }*/


    function fShowMap() {
        Popup.SetHeaderText("Sửa vị trí Sensor");
        Popup.Show();
    }

    var MapInitialized = false;
    function OnPopupShown(s, e) {

        initialize();
        addMarkers();
    }
    function initialize() {  
        var map_canvas = document.getElementById('map_canvas');

        var map_options = {
            center: new google.maps.LatLng(16.436085, 108.587151),
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.HYBRID
        };

        map = new google.maps.Map(map_canvas, map_options);
        
        
    }
    
    function addMarkers() {
        var Latitude = document.getElementById('ContentPlaceHolder1_UcSensorManager1_grvData_DXEditor15_I').value;
        var Longtitude = document.getElementById('ContentPlaceHolder1_UcSensorManager1_grvData_DXEditor14_I').value;
        if (Latitude.length <= 0 || Longtitude.length <= 0) {
            Latitude = 21;
            Longtitude = 105;
        }
         
        var contenString = "<div>" +
            "<table>" +           
            "<tr>" +
            "<td height ='100'>" +
            "Vị trí hiện tại <br> Kinh độ: " + Longtitude  + "<br> Vĩ độ: " + Latitude +
            "</td>" +
            "</tr>" +
            "</div>";

        var infowindow = new google.maps.InfoWindow({
            content: contenString,
        });
        var iconBase = 'http://geotechnical.vn:8888/Icon/SensorIcon_n.png';

        var markerImage = new google.maps.MarkerImage(
            iconBase,
            new google.maps.Size(16, 16), //size
            null, //origin
            null, //anchor
            new google.maps.Size(16, 16) //scale
        );
        myLatlng = new google.maps.LatLng(Latitude, Longtitude);
        var marker = new google.maps.Marker(
            {
                position: myLatlng,
                title: 'Di chuyển để thay đổi vị trí!',
                map: map,
                icon: markerImage,
                draggable: true
            });
        
        google.maps.event.addListener(marker, 'click', function () {
            infowindow.open(map, this);
        });
         
        google.maps.event.addListener(map, 'zoom_changed', function () {

            var pixelSizeAtZoom0 = 16; //the size of the icon at zoom level 0
            var maxPixelSize = 40; //restricts the maximum size of the icon, otherwise the browser will choke at higher zoom levels trying to scale an image to millions of pixels

            var zoom = map.getZoom();
            if (zoom <= 6) zoom = 0;
            var relativePixelSize = Math.round(pixelSizeAtZoom0 * Math.pow(2, zoom)); // use 2 to the power of current zoom to calculate relative pixel size.  Base of exponent is 2 because relative size should double every time you zoom in

            if (relativePixelSize > maxPixelSize) //restrict the maximum size of the icon
                relativePixelSize = maxPixelSize;

            //change the size of the icon
            marker.setIcon(
                new google.maps.MarkerImage(
                    marker.getIcon().url, //marker's same icon graphic
                    null,//size
                    null,//origin
                    null, //anchor
                    new google.maps.Size(relativePixelSize, relativePixelSize) //changes the scale
                )
            );
        });
        
        google.maps.event.addListener(
            marker,
            'dragend',
            function () {
                //javascript: grvData.PerformCallback("EditPossition");
                var Lat = document.getElementById('ContentPlaceHolder1_UcSensorManager1_grvData_DXEditor15_I');
                Lat.value = marker.position.lat().toFixed(4);
                
                var Long = document.getElementById('ContentPlaceHolder1_UcSensorManager1_grvData_DXEditor14_I');
                Long.value = marker.position.lng().toFixed(4);
                contenString = "<div>" +
            "<table>" +
            "<tr>" +
            "<td height ='100'>" +
            "Vị trí hiện tại <br> Kinh độ: " + Long.value + "<br> Vĩ độ: " +  Lat.value +
            "</td>" +
            "</tr>" +
            "</div>";

                infowindow = new google.maps.InfoWindow({
                    content: contenString,
                });
                
            });
    }
</script>
<style type="text/css">

    .dxeBase { font: 12px Tahoma, Geneva, sans-serif; }

    .auto-style1 { width: 122px; }
</style>
<div style="width: 98%">
    

    <table style="width: 100%;">
        <tr>
            <td class="auto-style1">
                &nbsp;</td>
            <td>
                &nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td colspan="4">
                <dx:ASPxGridView ID="grvData" ClientInstanceName="grvData" runat="server" AutoGenerateColumns="False" Width="100%" KeyFieldName="MaSensor" OnInitNewRow="grvData_InitNewRow" OnRowInserting="grvData_RowInserting" OnRowUpdating="grvData_RowUpdating"  OnStartRowEditing="grvData_StartRowEditing" OnParseValue="grvData_ParseValue" OnCancelRowEditing="grvData_CancelRowEditing" OnCustomJSProperties="grvData_CustomJSProperties" OnCustomCallback="grvData_CustomCallback"  >
              
                    <Columns>
                        <dx:GridViewCommandColumn  ShowEditButton="True" ShowNewButtonInHeader="True" VisibleIndex="0" Width="70px" ShowClearFilterButton="True">
                        </dx:GridViewCommandColumn>
                        <dx:GridViewDataTextColumn VisibleIndex="1" Caption="Tên Sensor" FieldName="TenSensor" Name="TenSensor">
                            <Settings AutoFilterCondition="Contains" />
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn VisibleIndex="2" Caption="Mã Sensor" FieldName="MaSensor" Name="MaSensor" ReadOnly="True">
                            <Settings AutoFilterCondition="Contains" />
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn VisibleIndex="13" Caption="Mô tả" FieldName="MoTa" Name="MoTa">
                            <Settings AutoFilterCondition="Contains" />
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataComboBoxColumn Caption="Cổng" FieldName="MappingNo" Name="MappingNo" VisibleIndex="6">
                            <PropertiesComboBox DropDownStyle="DropDownList">
                                <Items>
                                    <dx:ListEditItem Text="Vị trí số 1" Value="0" />
                                    <dx:ListEditItem Text="Vị trí số 2" Value="1" />
                                    <dx:ListEditItem Text="Vị trí số 3" Value="2" />
                                    <dx:ListEditItem Text="Vị trí số 4" Value="3" />
                                    <dx:ListEditItem Text="Vị trí số 5" Value="4" />
                                    <dx:ListEditItem Text="Vị trí số 6" Value="5" />
                                    <dx:ListEditItem Text="Vị trí số 7" Value="6" />
                                    <dx:ListEditItem Text="Vị trí số 8" Value="7" />
                                    <dx:ListEditItem Text="Chưa xác định" Value="-1" />
                                </Items>
                            </PropertiesComboBox>
                        </dx:GridViewDataComboBoxColumn>
                        <dx:GridViewDataComboBoxColumn Caption="Thiết bị" FieldName="MaThietBi"  VisibleIndex="5" Name="MaThietBi">
                        </dx:GridViewDataComboBoxColumn>
                        <dx:GridViewDataTextColumn Caption="Cao độ" FieldName="Altitude" Name="Altitude" VisibleIndex="12">
                            <PropertiesTextEdit DisplayFormatString="g">
                            </PropertiesTextEdit>
                            <Settings AutoFilterCondition="Contains" />
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn Caption="Mật khẩu đi kèm" FieldName="Mk" Name="Mk" Visible="False" VisibleIndex="4">
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataTextColumn Caption="Đơn vị sensor" FieldName="DonVi" Name="DonVi" ReadOnly="True" VisibleIndex="3">
                        </dx:GridViewDataTextColumn>
                        <dx:GridViewDataSpinEditColumn Caption="Giới hạn giá trị max" FieldName="MaxValue" Name="MaxValue" VisibleIndex="7">
                            <PropertiesSpinEdit DisplayFormatString="g">
                            </PropertiesSpinEdit>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top" Wrap="True">
                            </CellStyle>
                        </dx:GridViewDataSpinEditColumn>
                         <dx:GridViewDataSpinEditColumn Caption="Giới hạn giá trị min" FieldName="MinValue" Name="MinValue" VisibleIndex="8">
                            <PropertiesSpinEdit DisplayFormatString="g">
                            </PropertiesSpinEdit>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top" Wrap="True">
                            </CellStyle>
                        </dx:GridViewDataSpinEditColumn>
                         <dx:GridViewDataSpinEditColumn Caption="Số lần quá giới hạn" FieldName="SoLanQuaGioiHan" Name="SoLanQuaGioiHan" VisibleIndex="9">
                            <PropertiesSpinEdit DisplayFormatString="g">
                            </PropertiesSpinEdit>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top" Wrap="True">
                            </CellStyle>
                        </dx:GridViewDataSpinEditColumn>
                        <dx:GridViewDataComboBoxColumn Caption="Đơn vị" FieldName="DonViTg" Name="DonViTg" VisibleIndex="10">
                            <PropertiesComboBox>
                                <Items>
                                    <dx:ListEditItem Text="Giây" Value="1" />
                                    <dx:ListEditItem Text="Phút" Value="60" />
                                    <dx:ListEditItem Text="Giờ" Value="3600" />
                                </Items>
                            </PropertiesComboBox>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top">
                            </CellStyle>
                        </dx:GridViewDataComboBoxColumn>
                        <dx:GridViewDataSpinEditColumn Caption="Thời gian lấy mẫu cảnh báo" FieldName="ThoiGianLayMauCanhBao" Name="ThoiGianLayMauCanhBao" VisibleIndex="8">
                            <PropertiesSpinEdit DisplayFormatString="g" NumberType="Integer">
                            </PropertiesSpinEdit>
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Wrap="True" />
                            <CellStyle HorizontalAlign="Left" VerticalAlign="Top" Wrap="True">
                            </CellStyle>
                        </dx:GridViewDataSpinEditColumn>
                        <dx:GridViewDataButtonEditColumn Caption="Kinh độ" FieldName="Longitude" Name="Longitude" VisibleIndex="10" >
                            <PropertiesButtonEdit DisplayFormatString="g">
                                <ClientSideEvents ButtonClick="function(s, e) {fShowMap(s,e);}" />
                                <Buttons>
                                    <dx:EditButton >
        
                                    </dx:EditButton>
                                </Buttons>

                            </PropertiesButtonEdit>
                            <Settings AutoFilterCondition="Contains" />
                        </dx:GridViewDataButtonEditColumn>
                        <dx:GridViewDataButtonEditColumn Caption="Vĩ độ" FieldName="Latitude" Name="Latitude" VisibleIndex="11">
                            <PropertiesButtonEdit DisplayFormatString="g">
                                <ClientSideEvents ButtonClick="function(s, e) { fShowMap(s,e);}" />
                                <Buttons>
                                    <dx:EditButton>
                                    </dx:EditButton>
                                </Buttons>
                            </PropertiesButtonEdit>
                            <Settings AutoFilterCondition="Contains" />
                        </dx:GridViewDataButtonEditColumn>
                    </Columns>
                    <SettingsBehavior ConfirmDelete="True" AutoFilterRowInputDelay="100"/>
                    <SettingsPager PageSize="10">
                    </SettingsPager>
                    <Settings ShowFilterRow="True" ShowFilterRowMenu="True"   HorizontalScrollBarMode="Auto"/>
                    <%--<SettingsText ConfirmDelete="Bạn có muốn xóa dòng dữ liệu này?" />--%>
                    <SettingsCommandButton>
                        <NewButton Text="Thêm">
                        </NewButton>
                        <UpdateButton Text="Cập nhật">
                        </UpdateButton>
                        <CancelButton Text="Hủy bỏ">
                        </CancelButton>
                        <EditButton Text="Sửa">
                        </EditButton>
                       <%-- <DeleteButton Text="Xóa">
                        </DeleteButton>--%>
                        <ClearFilterButton Text="Xóa">
                        </ClearFilterButton>
                    </SettingsCommandButton>
                </dx:ASPxGridView>
            </td>
        </tr>
        <tr>
            <td class="auto-style1">&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
        </tr>
    </table>
   <dx:ASPxPopupControl ID="ASPxPopupControl1" ClientInstanceName="Popup" runat="server" 
        PopupHorizontalAlign="WindowCenter" PopupVerticalAlign="WindowCenter" AllowDragging="True" AllowResize="True" Modal="True" CloseAction="CloseButton">
        <ContentCollection>
            <dx:PopupControlContentControl runat="server" ID="ContentColl1">
                <div id="map_canvas" style="width:1000px; height: 800px"></div>
                <div>
                    <asp:hiddenfield ID="LatLong"  runat="server" value="sdfsdafsd">  
                    </asp:hiddenfield>
                </div>
            </dx:PopupControlContentControl>
        </ContentCollection>
         <ClientSideEvents Shown="OnPopupShown" />
    </dx:ASPxPopupControl>
    
</div>